<template>  
  <div class="not-found-page">  
    <div class="image-container">  
      <img class="not-found-image" src="../../assets/images/404.gif" alt="404 Not Found">  
    </div>  
    <h1 class="page-title">404</h1>  
    <p class="page-subtitle">页面未找到</p>  
    <p class="page-description">对不起，你似乎来到了一个不存在的页面。</p>  
    <div class="actions">  
      <router-link to="/" class="home-link">返回首页</router-link>  
      <!-- 如果有搜索组件，可以放在这里 -->  
      <!-- <search-component /> -->  
    </div>  
  </div>  
</template>  
    <!-- 
          <img src="../../assets/images/404.gif" alt="404" class="not-found-image" />  

     -->
  <script>  
  import { ref } from 'vue';  
    
  export default {  
    name: 'NotFound',  
    setup() {  
      // 可以在这里添加一些响应式状态或逻辑，例如跟踪搜索查询等  
      const searchQuery = ref('');  
    
      // 返回响应式状态或方法，如果需要的话  
      return {  
        searchQuery,  
      };  
    },  
  };  
  </script>  
    
  <style scoped>  
@keyframes slideUp {  
  from {  
    transform: translateY(100%);  
    opacity: 0;  
  }  
  to {  
    transform: translateY(0);  
    opacity: 1;  
  }  
}  
  
.not-found-page {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  height: 100vh;  
  text-align: center;  
  color: #333;  
  font-family: 'Arial', sans-serif;  
  animation: slideUp .6s ease-out forwards; /* 应用动画 */  
}  
  
.image-container {  
  margin-bottom: 2rem;  
}  
  
.not-found-image {  
  width: 300px; /* 你可以根据需要调整图片大小 */  
  height: auto;  
}  
  
.page-title {  
  font-size: 3rem;  
  margin-bottom: 0.5rem;  
  color: #666;  
}  
  
.page-subtitle {  
  font-size: 1.5rem;  
  margin-bottom: 1rem;  
  color: #999;  
}  
  
.page-description {  
  font-size: 1rem;  
  margin-bottom: 2rem;  
}  
  
.actions {  
  display: flex;  
  justify-content: center;  
}  
  
.home-link {  
  display: inline-block;  
  padding: 0.5rem 1rem;  
  background-color: #007bff;  
  color: #fff;  
  text-decoration: none;  
  border-radius: 4px;  
  margin: 0 0.5rem;  
  transition: background-color 0.3s ease;  
}  
  
.home-link:hover {  
  background-color: #0056b3;  
}  
  </style>